import _ from 'lodash';
import { getCssVariableValue } from '@/utils/utils';

export const getTableColumns = (_data) => {
  // 单元格合并，别写死
  let list1 = [];
  let list2 = [];
  let colsPanMap2 = {}; // 类型二合并列
  const getRowsPanMap = (list) => {
    const listUniq = _.uniq(list);
    let temp = {};
    listUniq.map((x) => {
      const start = list.indexOf(x);
      const end = list.lastIndexOf(x);
      temp[start] = end - start + 1;
    });
    return temp;
  };
  _data.map((x, idx) => {
    const t1 = x.transactionType1;
    const t2 = x.transactionType2;
    list1.push(t1);
    if (t2 === '*' || t2 === '小计：') {
      colsPanMap2[idx] = 2;
    } else {
      list2.push(t2);
    }
  });
  const rosPanMap1 = getRowsPanMap(list1); // 类型一合并行
  const rosPanMap2 = getRowsPanMap(list2); //  类型二合并行
  return [
    {
      name: '项目信息',
      children: [
        {
          name: '',
          code: 'transactionType1',
          width: 60,
          render: (v) => v?.replace('：', '') || '',
          getCellProps: (v, r, i) => ({
            rowSpan: rosPanMap1[i] || 1,
            style: { background: '#383c3e', textAlign: 'center' },
          }),
        },
        {
          name: '',
          code: 'transactionType2',
          width: 60,
          render: (v, r) => {
            if (!v) return '';
            if (v === '*') return r?.generatorType;
            if (v.indexOf('：') > -1) return v?.replace('：', '');
            return v;
          },
          getCellProps: (v, r, i) => ({
            colSpan: colsPanMap2[i] || 1,
            rowSpan: rosPanMap2[i] || 1,
            style: {
              background: '#383c3e',
              textAlign: 'center',
              padding: v === '售购电合同' ? '0 12px' : '0 8px',
            },
          }),
        },
        {
          name: '',
          code: 'generatorType',
          width: 60,
          render: (v) => v?.replace('：', '') || '',
          getCellProps: (props) => ({
            style: { background: '#383c3e', textAlign: 'center' },
          }),
        },
      ],
    },
    {
      name: '电量(MWH)',
      code: 'statementQuantity',
      align: 'right',
      width: 130,
      render: (v) => (typeof v === 'number' ? v.toFixed(3) : '-'),
    },
    {
      name: '电价(元/MWH)',
      code: 'statementPrice',
      align: 'right',
      width: 130,
      render: (v) => (typeof v === 'number' ? v.toFixed(2) : '-'),
    },
    {
      name: '电费(万元)',
      code: 'statementIncome',
      align: 'right',
      width: 130,
      render: (v) => (typeof v === 'number' ? (v / 10000).toFixed(2) : '-'),
    },
  ];
};

/** 图：系列配置 */
const seriesMap = {
  powerData: [
    {
      code: 'thermalPowerList',
      name: '火电',
      type: 'bar',
      color: '#F4903D',
      props: { stack: 'agroup' },
    },
    {
      code: 'windPowerList',
      name: '风电',
      type: 'bar',
      color: '#5E92F6',
      props: { stack: 'agroup' },
    },
    {
      code: 'solarPowerList',
      name: '太阳能',
      type: 'bar',
      color: '#67DCAB',
      props: { stack: 'agroup' },
    },
  ],
  priceData: [
    {
      code: 'thermalPriceList',
      name: '火电',
      type: 'line',
      color: '#F4903D',
      props: { smooth: true },
    },
    {
      code: 'windPriceList',
      name: '风电',
      type: 'line',
      color: '#5E92F6',
      props: { smooth: true },
    },
    {
      code: 'solarPriceList',
      name: '太阳能',
      type: 'line',
      color: '#67DCAB',
      props: { smooth: true },
    },
    {
      code: 'averagePriceList',
      name: '合计',
      type: 'line',
      color: '#E86452',
      props: { smooth: true },
    },
  ],
};

export const getChartOption = (_data, _key) => {
  const _series = seriesMap[_key];
  if (!_data || !_series) return null;
  const xData = (_data?.localDateList || []).map((x) => x.replace(/[-]/g, ''));
  const series = _series.map(({ code, ...others }) => ({
    ...others,
    data: _data[code],
  }));
  return {
    series,
    grid: { top: 24, left: 60, bottom: 48, right: 0 },
    tooltip: {},
    legend: {
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
      },
    },
    xAxis: [
      {
        type: 'category',
        formatter: (v) => v.slice(4),
        data: xData,
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid',
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisTick: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          color: getCssVariableValue('--chart-font-color'),
        },
        splitLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-y-line'),
          },
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
      },
    ],
  };
};
